<template>
  <div id="app" class="app">
    <router-view/>
  </div>
</template>
<script setup>
import { onBeforeUnmount, onMounted } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

// 在页面加载时读取sessionStorage里的状态信息
onMounted(() => {
  if (sessionStorage.getItem("store")) {
    store.replaceState(
      Object.assign({}, store.state, JSON.parse(sessionStorage.getItem("store")))
    );
  }
});

// 在页面刷新时将vuex里的信息保存到sessionStorage里
onBeforeUnmount(() => {
  sessionStorage.setItem("store", JSON.stringify(store.state));
});
</script>
<style lang="scss" scoped>
html,body,#app{
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}
</style>
